<template>
    <view class="content" :style="'background-image: url(' + $c.config.media + 'yuemini/reg_bg.png);'">
		<!-- <view class="content" :style="'background-image: url(' + $c.config.media + 'yuemini/reg_bg.png);'"> -->
        <view class="warp">
            <c-gap height="80rpx" />
            <view class="nav-bar banxin">
                <view><uni-icons type="back" size="24" color="#fff" @tap="$c.jump(1, 5)"></uni-icons></view>
                <view class="title">注册</view>
            </view>
            <c-gap height="64rpx" />
            <view class="form-box">
                <view class="item">
                    <view>
                        <text class="item-name">手机号</text>
                    </view>
                    <view class="input">
						<!-- maxlength="11" -->
                        <input type="number" placeholder="请输入手机号" v-model="formData.loginname" />
                    </view>
                </view>
                <c-gap height="24rpx" />
                <view class="item">
                    <view>
                        <text class="item-name">验证码</text>
                    </view>
                    <view class="input">
                        <view><input type="text" placeholder="请输入验证码" v-model="formData.code" /></view>
                        <text class="item-name" @tap.stop="sms">{{ countDownText }}</text>
                    </view>
                </view>
                <c-gap height="24rpx" />
                <view class="item">
                    <view>
                        <text class="item-name">密码</text>
                    </view>
                    <view class="input">
                        <view>
                            <input type="text" placeholder="请输入密码" v-model="formData.password" v-if="show_pass" />
                            <input type="password" placeholder="请输入密码" v-model="formData.password" v-else />
                        </view>
                        <view @tap.stop="tapLook()">
                            <image :src="$c.config.media + 'mini/lock2.png'" class="icon" v-if="show_pass" />
                            <image :src="$c.config.media + 'mini/look1.png'" class="icon" v-else />
                        </view>
                    </view>
                </view>

                <c-gap height="66rpx" />
                <view class="btn" @tap="submit">立即注册</view>
                <c-gap height="48rpx" />

                <view class="aggre">
                    如果继续，代表您同意

                    <text @tap.stop="goAgreement">《用户协议》</text>
                    严禁用户通过本APP进行任何不正当或非法活动
                </view>
            </view>

            <c-gap height="54rpx" />
            <view class="to_reg" @tap="toLogin()">
                <view class="mid">
                    <image :src="$c.config.media + 'mini/phone_icon.png'" class="icon"></image>
                    <text class="btn-text">已有账号？点我登录</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
const app = getApp();
import md5 from '@/utils/md5.js';
import { genTestUserSig } from '@/im/debug/GenerateTestUserSig.js';
import CGap from '@/components/c-gap.vue';
export default {
		components:{ CGap },
    data() {
        return {
            $c: this.$c,
            current: 0,
            swiperHeight: 0,
			formData: {
				loginname: '',
				code: '',
				password: ''
			},
            show_pass: false,
            isCountDown: false, // 是否正在倒计时
            countDownText: '发送验证码' // 倒计时文本
        };
    },
    onLoad() {
        this.data = uni.getStorageSync('registerInfo');
    },
    methods: {
        tapLook() {
            this.show_pass = !this.show_pass;
        },
        // 去登录
        toLogin() {
			// #ifdef MP-WEIXIN
			  this.codelogin();							  
			// #endif
			// #ifdef  APP-PLUS
			 this.$c.jump('/im/login/login', 1);
			// #endif
        },
		submit() {
			this.loginTo()
		},
		async loginTo() {
		  let userID = this.username;
		  let res = await this.$c.post('/app/login/login?loginname='+this.formData.loginname+
		  '&password='+md5.hex_md5(this.formData.password)+'&loginType=2&code='+this.formData.code);
		  if (res.code != 0) {
		  	this.$c.show(res.msg);
		  	return;
		  }
		  let token = res.data.token
		  userID = res.data.user.tengxuncode.toString();
		  const userSig = genTestUserSig(userID).userSig;
		  uni.setStorageSync('token', res.data.token);
		  app.globalData.userInfo = {
		  	token,
		  	userSig,
		  	userID
		  };
		  uni.setStorageSync('userInfo', app.globalData.userInfo);
		  this.getUserInfo();
		  // 登录腾讯im
		  uni.$TUIKit
		  	.login({
		  		userID: userID,
		  		userSig: userSig
		  	})
		  	.then(res => {
		  		this.$store.commit('setToken', app.globalData.userInfo);
		  		uni.showToast({
		  			title: '登录中...',
		  			duration: 2000,
		  			icon: 'none'
		  		});
		  	})
		  	.catch((err) => {
		  	});
		},
		async getUserInfo() {
			let res = await this.$c.post('/app/usermessage/getMessage')
			let userInfo = res.data
			uni.setStorageSync('userInfoID', userInfo.id);
			let userInfoID = uni.getStorageSync('userInfoID');
		     //2为未完成资料填写  1已完成
			if (userInfo.iswanshan == 2) {
				uni.navigateTo({
					url: '/pages/register/registers'
				})					
			} else {
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/m-pages/m-personnelList/index'
					});
				}, 1000);
			}
		},
		
		goAgreement(){
			uni.navigateTo({
				url: '/pages/m-pages/m-login/agreement'
			})
		},
		async sms(){
			let param = {
				loginname: this.formData.loginname,
				type: '1'
			};
			let res = await this.$c.post('/app/zhuce/sendCode', param)
			if(res.code != 0){
				uni.showToast({
				  title: res.msg,
				  duration: 1000,
				  icon: 'none'
				});
			}else{
				uni.showToast({
				  title: '短信已发送',
				  duration: 1000,
				  icon: 'none'
				});
			}
		},
        async login() {
            let rule = {
                'phone|手机': 'require|mobile',
                'password|密码': 'require|length:6,20',
                'code|验证码': 'require'
            };
            let res = await this.$c.post('/apa/register', this.data);
            if (res.status === 0) {
                this.$c.show(res.message);
                return;
            }
            uni.setStorageSync('rongcloud_token', res.data.rongcloud_token);
            uni.setStorageSync('token', res.data.token);
            uni.setStorageSync('user', res.data.user);
            uni.removeStorageSync('showTiYan');
            // 开启体验  如果用户市会员了 直接去首页  不是会员 验证门票
            if (res.data.user.is_vip == 1) {
                this.$c.show('注册成功', 'success', 1000, '/pages/home/home', 3);
            } else {
                if (res.data.user.authentication == 1) {
                    this.$c.show('注册成功', 'success', 1000, '/pages/home/home', 3);
                } else {
                    // 注册成功后发消息
                    await this.$c.post('/apa/user/autoSendMessage');
                    this.$c.show('注册成功', 'success', 1000, '/pages/register/join', 3);
                }
            }
        }
    }
};
</script>

<style lang="scss">
.content {
    width: 750rpx;
    min-height: 100vh;
    background-size: 750rpx 100vh;
    //background-repeat: no-repeat;
    background-position: 0 0;

    .warp {
        width: 702rpx;
        margin: 0 auto;

        .nav-bar {
            display: flex;
            font-weight: 550;
            font-size: 34rpx;
            color: #fff;

            .title {
                width: 680rpx;
                text-align: center;
            }
        }

        .form-box {
            width: 694rpx;
            margin: 0 auto;

            .item {
                width: 694rpx;
                height: 194rpx;
                background: rgba(255, 255, 255, 0.1);
                border-radius: 24rpx;
                padding: 20rpx;
                box-sizing: border-box;

                .item-name {
                    height: 44rpx;
                    font-size: 32rpx;

                    font-weight: 600;
                    color: #ffffff;
                    line-height: 44rpx;
                }

                .input {
                    margin-top: 10rpx;
                    width: 654rpx;
                    height: 90rpx;
                    line-height: 90rpx;
                    background: rgba(255, 255, 255, 0.2);
                    border-radius: 8rpx;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 0 20rpx;
                    box-sizing: border-box;
                    color: #ffffff;

                    .icon {
                        width: 50rpx;
                        height: 30rpx;
                    }
                }
            }

            .btn {
                width: 452rpx;
                height: 96rpx;
                line-height: 96rpx;
                text-align: center;
                border-radius: 100rpx;
                margin: 0 auto;
                background: linear-gradient(127deg, #fff4de 0%, #ffe6ba 100%, #ffe6ba 100%);
                font-size: 32rpx;
                font-weight: 550;
            }

            .aggre {
                margin: 0 auto;
                width: 604rpx;
                font-size: 24rpx;
                color: #fff;

                text {
                    color: #8674fa;
                }

                // height: 24rpx;
            }

            .no-user {
                width: 356rpx;
                height: 24rpx;
                display: block;
                margin: 0 auto;
            }
        }

        .to_reg {
            border: 2rpx solid #fff;
            width: 670rpx;
            height: 108rpx;
            line-height: 108rpx;
            color: #fff;
            margin: 0 auto;
            border-radius: 40rpx;
            background: rgba(255, 255, 255, 0.1);

            .mid {
                width: 400rpx;
                margin: 0 auto;

                .icon {
                    // background-color: #fff;
                    width: 32rpx;
                    height: 32rpx;
                    vertical-align: middle;
                }

                .btn-text {
                    color: #fff;

                    vertical-align: middle;
                    margin-left: 20rpx;
                }
            }
        }
    }
}
</style>
